<template>
    <div id="all">
        <nav>
            <span class="fa fa-angle-left icon" @touchstart="back"></span>
            <span>购物车</span>
            <router-link to="/second/Message">
                <span class="fa fa-commenting-o"></span>
            </router-link>
        </nav>
        <div id="main" v-show="list.length<1">
            <img src="/static/ss.jpg">
            <p>囧~购物车还是空的~</p>
            <router-link to="/">
                <span>去首页逛逛</span>
            </router-link>
        </div>
        <div v-for="(goods,k) in obj" class="item">
            <div class="item-top">
                <input 
                    type="checkbox"
                    @change="categoryCheck(k,$event)"
                    :checked="isCategoryCheck(k)"
                >
                <label for="">{{k}}</label>
            </div>
            <div v-for="g in goods" class="box">
                <input type="checkbox" v-model="g.check" @change="$forceUpdate()">
                
                <div class="img">
                    <img :src="g.pic[0]">
                </div>
                <div class="info">
                    <p>{{g.name}}</p>
                    <div class="price">
                        <p class="price-num">￥{{g.price*g.number}}</p>
                        <span>数量：
                        <button @click="numberDecrease(g)">-</button>
                        <span>{{g.number}}</span>
                        <button @click="g.number++">+</button>
                        </span>
                    </div>
                    <p class="area">{{g.area}}</p>
                    <span class="fa fa-trash qq" @touchstart="removeClick(g._id)"></span>
                </div>
            </div>
            <div class="last">
                <div class="last-one">
                    <input type="checkbox" @change="checkAll" :checked="isCheckAll()">
                    <label>全部</label>
                </div>
                <div class="last-two">
                    <span>总价:{{totalPrice}}</span>
                    <span>结算({{total}})</span>
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
export default{
    data:function(){
        return{
            list:[],
            obj:{}
        }
    },
    methods:{
        back:function(){
            history.back();
        },
        categoryCheck:function(k,e){
            this.obj[k].forEach(g=>{
                g.check = e.target.checked;
            });
            this.$forceUpdate();
        },
        isCategoryCheck:function(k){
            return this.obj[k].every(e=>{
                return e.check;
            });
        },
        checkAll:function(e){
            this.list.forEach(g=>{
                g.check= e.target.checked;
            });
            this.$forceUpdate();
        },
        isCheckAll:function(){
            return this.list.every(g=>{
                return g.check;
            });
        },
         numberDecrease:function(g){
            if(g.number>1){
                g.number--;
            }
        },
        removeClick:function(e){
            this.$store.dispatch("requestRemove",{params:{e}})
            .then(res=>{
                layer.msg(res.data.msg);
                this.$store.dispatch("requestMycart")
                .then(res=>{
                    this.list = res.data.msg;
                    var goodCategory = {};
                    this.list.forEach(e=>{
                        if(!goodCategory[e.type]){
                            goodCategory[e.type] = [];
                        }
                        goodCategory[e.type].push(e);
                    })
                    this.obj = goodCategory;
                })
            })
        }
    },
    mounted:function(){
        this.$store.dispatch("requestMycart")
        .then(res=>{
            this.list = res.data.msg;
            var goodCategory = {};
            this.list.forEach(e=>{
                if(!goodCategory[e.type]){
                    goodCategory[e.type] = [];
                }
                goodCategory[e.type].push(e);
            })
            this.obj = goodCategory;
        })
    },
    computed:{
        totalPrice:function(){
            var money = 0;
            for(var i = 0;i<this.list.length;i++){
                if(this.list[i].check==true){
                    money+=this.list[i].price*this.list[i].number;
                }
            }
            return money;
        },
        total:function(){
            var s = 0;
            for(var i = 0;i<this.list.length;i++){
                if(this.list[i].check==true){
                    s++;
                }
            }
            return s;
        }
    }
}
</script>

<style scoped>
    #all{
        background-color: #eee;
        height: 100vh;
    }
    nav{
        display: flex;
        justify-content: space-between;
        padding: 5px 8px;
        height: 35px;
        border-bottom: 1px solid #ccc;
        background-color: white;
    }
    nav a{
        color: black;
    }
    .icon{
        font-size: 20px;
    }
    #main{
        text-align: center;
        margin-top: 180px;
        width:100vw;
    }
    #main img{
        width: 100px;
        height: 100px;
    }
    #main p{
        font-size: 14px;
    }
    #main span{
        display: inline-block;
        width: 150px;
        font-size: 14px;
        background-color: white;
        border: none;
        border: 1px solid red;
        padding: 3px 8px;
        color: red;
    }
    .item{
        border-bottom: 1px solid #999;
        background-color: white;
    }
    .item-top{
        width: 100%;
        background-color: #eee;
        height: 25px;
        border-bottom: 1px solid #ccc;
    }
    .box{
        display: flex;
        height: 120px;
        position: relative;

    }
    .img img{
        width: 40vw;
        height: 30vw;
    }
    .info{
        margin-left: 4px;
        margin-bottom: 10px;
    }
    .info p:nth-of-type(1){
        margin: 0;
        margin-bottom: 6px;
        font-size: 14px;
    }
    .last{
        width: 100%;
        height: 35px;
        line-height: 35px;
        position: fixed;
        left: 0;
        bottom: 0px;
        display: flex;
        justify-content: space-between;
        background-color: white;
    }
    .last-two span:nth-of-type(2){
        background-color: orangered;
        padding: 8px 10px 10px 10px;
        color: white;
        cursor: pointer;
    }
    .price{
        font-size: 14px;
    }
    .price-num{
        color: orangered;
    }
    .qq{
        position: absolute;
        right: 30px;
        top: 90px;
    }
    .area{
        margin: 0;
        margin-top: 13px;
        font-size: 14px;
    }
</style>